<template>
  <div class="globalRuleMana-container common-container">
    <div class="common-top">
      <span class="left title">
        字典管理<br>
        <span class="tips">
          字典是用于全局统一的属性，在确定添加之后，请不要随意改变字典的编码和值，否则可能造成系统的损坏！
        </span>
      </span>
      <el-button v-if="hasPerm('system:dict:edit')" size="small" type="primary" @click="append">添加</el-button>
    </div>
    <div class="common-bot">
      <el-table
        :data="dicts"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="name"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="code"
          label="编码">
        </el-table-column>
        <el-table-column
          prop="val"
          label="值">
        </el-table-column>
        <el-table-column
          prop="enable"
          label="是否启用">
          <template slot-scope="scope">
            {{ scope.row.enable ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="queue"
          label="排序">
        </el-table-column>
        <el-table-column
          prop="actions"
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="() => append(scope.row)">
              添加子节点
            </el-button>
            <el-button
              v-if="scope.row.id > 0"
              type="text"
              size="mini"
              @click="() => edit(scope.row)">
              编辑
            </el-button>
            <el-button
              v-if="scope.row.id > 0"
              type="text"
              style="color: red"
              size="mini"
              @click="() => remove(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-dialog
      title="添加或编辑字典"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="centerDialogVisible"
      @closed="editHide"
      width="50%">
      <el-form :model="form" label-width="100px">
        <el-form-item label="上级">
          <el-cascader
            v-model="form.parentIds"
            :options="dicts"
            placeholder="请选择父级，未选择则为最顶级"
            clearable
            @change="handleParentChange"
            style="width: 100%"
            :props="{ expandTrigger: 'hover', label:'name', checkStrictly: true, value:'id'}">
          </el-cascader>
        </el-form-item>
        <el-form-item label="字典名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典编码">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典代表值">
          <el-input v-model="form.val" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.detail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.queue" autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="form.enable"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editHide">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api'

export default {
  name: "Dict",
  data() {
    return {
      dicts: [],
      centerDialogVisible: false,
      form: {
        formId: null,
        parentIds: null,
        name: null,
        code: null,
        val: null,
        remark: null,
        detail: null,
        parentId: null,
        queue: null,
        enable: true,
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      Api.dict.trees({}).then(res => {
        this.dicts = res.data
      })
    },
    handleParentChange(v) {
      console.log(v);
      this.form.parentId = v[v.length - 1]
    },
    editHide() {
      this.centerDialogVisible = false
      this.form = {
        formId: null,
        parentIds: null,
        name: null,
        code: null,
        val: null,
        remark: null,
        detail: null,
        parentId: null,
        queue: null,
        enable: true,
      }
    },
    append(data) {
      this.centerDialogVisible = true
      this.form.parentId = data.id
      let parentIds = data.parentIds
      if (!parentIds) parentIds = []
      this.form.parentIds = parentIds.concat([data.id])
    },
    edit(data) {
      this.form = {
        formId: data.id,
        parentIds: data.parentIds,
        name: data.name,
        code: data.code,
        val: data.val,
        remark: data.remark,
        detail: data.detail,
        parentId: data.parentId,
        queue: data.queue,
        enable: data.enable,
      }
      this.centerDialogVisible = true
    },
    remove(data) {
      this.$confirm("确认此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        Api.dict.del({
          targetIds: [data.id],
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.loadData();
          }
        }).catch(e => this.loadData());
      });
    },
    submit() {
      Api.dict.modify(this.form).then(res => {
        this.loadData()
        this.editHide()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.common-container {
  .common-bot {
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;

      .data {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 300px;
      }
    }
  }
}

</style>
